<template>
  <div class="box">
    <div class="box1">1111</div>
    <div class="box2">2222</div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="less">
// less是向下兼容css，所以less文件可以引用css文件
// less最大的特点: 1) 支持嵌套  2) 支持变量  3) 支持运算  4) 支持函数

@w: 200px;

.box {
  width: @w*4;
  height: @w*4;
  background-color: red;

  .box1 {
    width: @w*2;
    height: @w*2;
    background-color: blue;
  }

  .box2 {
    width: @w*2;
    height: @w*2;
    background-color: yellow;
  }
}
</style>
